<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="用户名称/ID">
          <Input v-model="formItem.input" placeholder="Enter something..." style="width:150px"></Input>
        </FormItem>
        <FormItem label="手机号码">
          <Input v-model="formItem.input" placeholder="Enter something..." style="width:150px"></Input>
        </FormItem>
        <FormItem label="申请状态">
          <Select v-model="formItem.input" style="width:150px">
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>
        <FormItem label="创建时间">
          <Row>
            <Col span="11">
              <DatePicker
                type="date"
                placeholder="Select date"
                v-model="formItem.date"
                style="width:200px"
              ></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button type="primary">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <TableList :columns="columns" :data="data"></TableList>
    <Modal title="Title" v-model="modal10" width="800" class-name="vertical-center-modal">
      <div style="min-height:200px;">
        <Table
          :columns="detailCol"
          :data="detailData"
          style="max-height:400px;overflow-y:scroll;"
          class="detailTable"
        ></Table>
      </div>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";

export default {
  name: "",
  data() {
    return {
      formItem: {
        input: "",
        select: "",
        date: ""
      },
      columns: [
        {
          title: "企业ID",
          key: "id"
        },
        {
          title: "企业信息",
          key: "message"
        },
        {
          title: "发布职位",
          key: "address"
        },
        {
          title: "在招职位",
          key: "address"
        },
        {
          title: "账户余额",
          key: "address"
        },
        {
          title: "时间",
          key: "address"
        },
        {
          title: "Action",
          key: "action",
          width: 250,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                      this.modal10 = true;
                    }
                  }
                },
                "充值记录"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],

      data: [
        {
          id: "John Brown",
          message: 18,
          address: "New York No. 1 Lake Park"
        },
        {
          id: "Jim Green",
          message: 24,
          address: "London No. 1 Lake Park"
        },
        {
          id: "Joe Black",
          agmessagee: 30,
          address: "Sydney No. 1 Lake Park"
        },
        {
          id: "Jon Snow",
          message: 26,
          address: "Ottawa No. 2 Lake Park"
        }
      ],
      detailCol: [
        {
          title: "操作时间",
          key: "time"
        },
        {
          title: "操作名称",
          key: "name"
        },
        {
          title: "本次充值",
          key: "nowCash"
        },
        {
          title: "累计充值",
          key: "allCash"
        }
      ],
      detailData: [
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        },
        {
          name: "John Brown",
          nowCash: 18,
          allCash: 200,
          time: "2016-10-03"
        }
      ],
      modal10: false
    };
  },
  components: {
    TableList
  },

  mounted() {
    console.log("columns", this.columns);
  },

  methods: {}
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
